"use client";
import { selectNewsDescs } from "@common/api/news_action";
import { Show } from "@refinedev/antd";
import { useParsed, useShow } from "@refinedev/core";
import { Card, Descriptions } from "antd";
import { useEffect, useState } from "react";

export default function NewsShow() {
  const { id } = useParsed();
  const { queryResult } = useShow({
    resource: "project/news",
    id: id
  });
  const record = queryResult?.data?.data;
  const [descList, setDescList] = useState<any[]>([]);
  useEffect(() => {
    if (record?.alias) {
      selectNewsDescs(record.alias).then((res:any) => {
        if (res.data) {
          setDescList(res.data);
        }
      });
    }
  }, [record?.alias]);

  return (
    <Show isLoading={queryResult?.isLoading}>
      <Descriptions column={1} bordered size="middle">
        <Descriptions.Item label="ID">{record?.id}</Descriptions.Item>
        <Descriptions.Item label="分类别名">
          {record?.category_alias ? (
            <span style={{
              backgroundColor: '#f0f0f0',
              padding: '4px 12px',
              borderRadius: '4px',
              fontSize: '14px',
              color: '#666'
            }}>
              {record.category_alias}
            </span>
          ) : (
            <span style={{ color: '#999' }}>未分类</span>
          )}
        </Descriptions.Item>
        <Descriptions.Item label="别名">{record?.alias}</Descriptions.Item>
        <Descriptions.Item label="URL">{record?.url}</Descriptions.Item>
        <Descriptions.Item label="图片">{record?.image}</Descriptions.Item>
        <Descriptions.Item label="创建时间">
          {record?.created_at ? new Date(record.created_at * 1000).toLocaleString('zh-CN') : '-'}
        </Descriptions.Item>
        <Descriptions.Item label="更新时间">
          {record?.updated_at ? new Date(record.updated_at * 1000).toLocaleString('zh-CN') : '-'}
        </Descriptions.Item>
        <Descriptions.Item label="浏览次数">{record?.view}</Descriptions.Item>
        <Descriptions.Item label="排序">{record?.sort}</Descriptions.Item>
        <Descriptions.Item label="推荐">{record?.recommend === 1 ? '是' : '否'}</Descriptions.Item>
        <Descriptions.Item label="状态">{record?.status === 1 ? '启用' : '禁用'}</Descriptions.Item>
      </Descriptions>
      {descList.length > 0 && (
        <div style={{marginTop: 24}}>
          <h3>多语言描述</h3>
          <Descriptions column={1} bordered size="small">
            {descList.map(desc => (
              <Descriptions.Item key={desc.id} label={desc.lang}>
                <div><b>标题：</b>{desc.title}</div>
                <div><b>关键词：</b>{desc.keyword}</div>
                <div><b>描述：</b>{desc.description}</div>
                <div><b>内容：</b>
                <Card>
                <div dangerouslySetInnerHTML={{__html: desc.content}}></div>
                </Card>
                </div>
              </Descriptions.Item>
            ))}
          </Descriptions>
        </div>
      )}
    </Show>
  );
} 